<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/carousel/">
    <script src="/static/ckeditor/ckeditor/ckeditor-init.js"></script>
    <script src="/static/ckeditor/ckeditor/ckeditor/ckeditor.js"></script>
    {% block title %}
    <title>云笔记首页</title>
    {% endblock %}
    <!-- Bootstrap core CSS -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie8-responsive-file-warning.js"></script>
    <![endif]-->
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/examples/carousel/carousel.css"
          rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper" style="margin-top: 0;background-color: #222">
    <div class="container-fluid" style="padding:0;">
        <div class="container">
            <nav class="navbar navbar-inverse navbar-static-top" style="margin: 0">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Cloud Note</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" id="nav_left">
                        <li class="active"><a href="/">首页</a></li>
                        <li><a href="{% url 'note_list' %}?tag=all">所有笔记</a></li>
                        <li><a href="{% url 'note_list' %}?tag=django">Django</a></li>
                        <li><a href="{% url 'note_list' %}?tag=python">Python</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">其他分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            {% for all_type in all_types %}
                                <li><a href="{% url 'note_list' %}?tag={{ all_type.name }}">{{ all_type.name }}</a></li>
                                {% endfor %}


                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" id="nav_right">
                        {% if user.is_authenticated %}
                            <li class="dropdown" id="user_info" >
                            <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                 <img class="img-circle" src="/media/{{ user.head_img }} "
                                      style="width: 30px;height: 30px;position: absolute;right: 80px;top: 10px" alt="用户头像">
                                {{ user }}
                                <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu">
                                <li><a href="{% url 'userinfo' 'head' %}">头像设置</a></li>
                                <li><a href="{% url 'userinfo' 'pwd' %}">修改密码</a></li>
                                <li><a href="/admin">登录后台</a></li>
                                <li><a href="{% url 'login' %}">重新登录</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="{% url 'logout' %}">退出登录</a></li>
                            </ul>
                        </li>
                            {% else %}
                            <li><a href="{% url 'register' %}">注册</a></li>
                            <li><a href="{% url 'login' %}">登录</a></li>
                        {% endif %}

                    </ul>
                </div>

            </nav>
            <script>
                {# 获取dom 元素 #}
                let nav_left_lis = document.querySelectorAll('#nav_left > li')
                let nav_right_lis = document.querySelectorAll('#nav_right > li')
                let url = window.location.href
                if (url.indexOf('login') >= 0){
                    {# url 页面是登录的页面  #}
                    {# 遍历左边的navlist 取消所有li的高亮 #}
                    for (let i = 0; i < nav_left_lis.length; i++) {
                        nav_left_lis[i].className = ''
                    }
                    {# 给右侧的navlist 对应的 li 设置 active   #}
                    nav_right_lis[1].className = 'active'
                }else if (url.indexOf('register') >= 0) {
                    {# url 页面是登录的页面  #}
                    {# 遍历左边的navlist 取消所有li的高亮 #}
                    for (let i = 0; i < nav_left_lis.length; i++) {
                        nav_left_lis[i].className = ''
                    }
                    {# 给右侧的navlist 对应的 li 设置 active   #}
                    nav_right_lis[0].className = 'active'
                }else if (url.indexOf('userinfo') >= 0) {
                    {# url 页面是登录的页面  #}
                    {# 遍历左边的navlist 取消所有li的高亮 #}
                    for (let i = 0; i < nav_left_lis.length; i++) {
                        nav_left_lis[i].className = ''
                    }
                    {# 给右侧的navlist 对应的 li 设置 active   #}
                    nav_right_lis[0].className = 'active'
                }

            </script>
        </div>
    </div>
</div>

{% block carousel %}


{% endblock %}


{% block content %}


{% endblock %}
<div class="container-fluid" style="position: fixed;bottom: 0;background-color: #555;width: 100%;z-index: 10">
    <!-- FOOTER -->
    <footer style="width: 100%;height: 60px;text-align: center;line-height: 60px;color: #fff">

        <p>&copy; 2016 Company, Inc. &middot; <a href="#">秦皇岛职业技术学院</a>  <a href="#">信息工程系</a> &middot; <a href="#">王国栋</a></p>

    </footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
